<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" >

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
	<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Cousine|Inconsolata" rel="stylesheet">
	<link rel="shortcut icon" type="image/png" href="/favicon.png">

	
	<link rel="stylesheet" href="/css/style.css">
	<link rel="stylesheet" href="/css/css/fontawesome-all.min.css">
	<script src="/js/main.js"></script>
	

	<!-- Begin Jekyll SEO tag v2.1.0 -->
<title>JS: Submit Comment Reply - Steem Developer</title>
<meta property="og:title" content="JS: Submit Comment Reply" />
<meta name="description" content="By the end of this tutorial you should know how to post a simple comment to Steem" />
<meta property="og:description" content="By the end of this tutorial you should know how to post a simple comment to Steem" />
<link rel="canonical" href="https://developer.steem.io/tutorials-javascript/submit_comment_reply" />
<meta property="og:url" content="https://developer.steem.io/tutorials-javascript/submit_comment_reply" />
<meta property="og:site_name" content="Steem Developer" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2018-07-20T12:56:08-05:00" />
<script type="application/ld+json">
{"@context": "http://schema.org",
"@type": "BlogPosting",
"headline": "JS: Submit Comment Reply",
"datePublished": "2018-07-20T12:56:08-05:00",
"description": "By the end of this tutorial you should know how to post a simple comment to Steem",
"url": "https://developer.steem.io/tutorials-javascript/submit_comment_reply"}</script>
<!-- End Jekyll SEO tag -->


	
</head>
<body>
<header>
	<h1>
		<button type="button" class="open-nav" id="open-nav"></button>
		<a href="/"  class="logo-link"><img src="/images/logotype_white.svg" height="40" alt="Steem Developer logo"></a>
	</h1>

	
	<form action="/search/" method="get">
		<input type="text" name="q" id="search-input" placeholder="Search">
		<input type="submit" value="Search" style="display: none;">
	</form>
	

	<div id="sidebar" class="sidebar">
	
	
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/">
		<h6 class="ctrl-nav-section title">Introduction</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/#introduction-welcome">Welcome to Steem</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/quickstart/">
		<h6 class="ctrl-nav-section title">Quickstart</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/quickstart/#quickstart-choose-library">Choose Library</a></li>
						
					
						
						<li><a href="/quickstart/#quickstart-steemd-nodes">steemd Nodes</a></li>
						
					
						
						<li><a href="/quickstart/#quickstart-testnet">Steem Testnet</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/tutorials/">
		<h6 class="ctrl-nav-section title">Tutorials</h6>
		<ul class="cont-nav-section content">
			
				
					
						<li><a href="/tutorials/#tutorials-javascript">Javascript</a></li>
					
				
					
						<li><a href="/tutorials/#tutorials-python">Python</a></li>
					
				
					
						<li><a href="/tutorials/#tutorials-ruby">Ruby</a></li>
					
				
					
						<li><a href="/tutorials/#tutorials-recipes">Recipes</a></li>
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/services/">
		<h6 class="ctrl-nav-section title">Services</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/services/#services-steemit">Steemit.com</a></li>
						
					
						
						<li><a href="/services/#services-steemconnect">SteemConnect</a></li>
						
					
						
						<li><a href="/services/#services-jussi">jussi</a></li>
						
					
						
						<li><a href="/services/#services-imagehoster">ImageHoster</a></li>
						
					
						
						<li><a href="/services/#services-sbds">SBDS</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/apidefinitions/">
		<h6 class="ctrl-nav-section title">Appbase API</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/apidefinitions/#apidefinitions-condenser-api">Condenser Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-account-by-key-api">Account By Key Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-broadcast-ops-comment">Broadcast Ops Comment</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-account-history-api">Account History Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-database-api">Database Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-follow-api">Follow Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-jsonrpc">Jsonrpc</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-market-history-api">Market History Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-network-broadcast-api">Network Broadcast Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-tags-api">Tags Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-witness-api">Witness Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-block-api">Block Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-broadcast-ops">Broadcast Ops</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/community/">
		<h6 class="ctrl-nav-section title">Community</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/community/#community-overview">Overview</a></li>
						
					
						
						<li><a href="/community/#community-resources">Resources</a></li>
						
					
						
						<li><a href="/community/#community-developeradvocate">Sharing & Help</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/glossary/">
		<h6 class="ctrl-nav-section title">Glossary</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/glossary/#glossary-chain-basics">Chain Basics</a></li>
						
					
						
					
						
						<li><a href="/glossary/#glossary-governance">Governance</a></li>
						
					
						
						<li><a href="/glossary/#glossary-transactions">Transactions</a></li>
						
					
						
						<li><a href="/glossary/#glossary-api">API</a></li>
						
					
						
						<li><a href="/glossary/#glossary-market">Market</a></li>
						
					
				
			
		</ul>
	</section>
	
</div>


	<!--<p class="copyright">-->
	<!--<a href="https://steemit.com.com/">-->
	<!--steemit-->
	<!--</a>-->
	<!--</p>-->
	<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
</header>
<div class="main" id="top">
	<div class="hero">
		<h1 class="hero__h1">Steem Developer Portal </h1>
		
		<img class="hero__img" src="/images/hero.png">
		
	</div>
	<section id="tutorials-javascript-submit-comment-reply" class="row tutorials-javascript-submit-comment-reply">
	<h3>
		<a id="tutorials-javascript-submit-comment-reply">
			JS: Submit Comment Reply
			
		</a>
	</h3>
	
		<p class="description">By the end of this tutorial you should know how to post a simple comment to Steem</p>
	

	<p><span class="fa-pull-left top-of-tutorial-repo-link"><span class="first-word">Full</span>, runnable src of <a href="https://github.com/steemit/devportal-tutorials-js/tree/master/tutorials/11_submit_comment_reply">Submit Comment Reply</a> can be downloaded as part of the <a href="https://github.com/steemit/devportal-tutorials-js">JS tutorials repository</a>.</span>
<br /></p>

<p>This tutorial will take you through the process of preparing and posting comment using the <code class="highlighter-rouge">broadcast.comment</code> operation.
Being able to post a comment is critical to most social applications built on Steem.</p>

<h2 id="intro">Intro</h2>

<p>We are using the <code class="highlighter-rouge">broadcast.comment</code> function provided by the <code class="highlighter-rouge">dsteem</code> library which generates, signs, and broadcasts the transaction to the network. On the Steem platform, posts and comments are all internally stored as a <code class="highlighter-rouge">comment</code> object, differentiated by whether or not a <code class="highlighter-rouge">parent_author</code> exists. When there is no <code class="highlighter-rouge">parent_author</code>, the it’s a post, when there is, it’s a comment.</p>

<h2 id="steps">Steps</h2>

<ol>
  <li><a href="#app-setup"><strong>App setup</strong></a> Import <code class="highlighter-rouge">dsteem</code> into <code class="highlighter-rouge">app.js</code> and prepare it to communicate with a Steem blockchain</li>
  <li><a href="#choose-post"><strong>Choose parent post</strong></a> Choose a parent post on which to comment. Parse the author and permlink from it.</li>
  <li><a href="#add-content"><strong>Add content</strong></a> Add <code class="highlighter-rouge">body</code> content to your comment</li>
  <li><a href="#get-comment"><strong>Get comment data</strong></a> Collect values from the UI</li>
  <li><a href="#get-permlink"><strong>Create comment permlink</strong></a> Create a permlink for your comment</li>
  <li><a href="#build-comment"><strong>Build comment object</strong></a> Assemble the information into a valid comment object</li>
  <li><a href="#post-comment"><strong>Post comment</strong></a> Send the new comment to the blockchain &amp; render the result.</li>
</ol>

<h4 id="1-app-setup">1. App setup<a name="app-setup"></a></h4>

<p>As usual, we have a <code class="highlighter-rouge">public/app.js</code> file which holds the Javascript segment of the tutorial. In the first few lines we define the configured library and packages:</p>

<div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="kr">const</span> <span class="nx">dsteem</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'dsteem'</span><span class="p">);</span>
<span class="kd">let</span> <span class="nx">opts</span> <span class="o">=</span> <span class="p">{};</span>
<span class="c1">//connect to community testnet</span>
<span class="nx">opts</span><span class="p">.</span><span class="nx">addressPrefix</span> <span class="o">=</span> <span class="s1">'STX'</span><span class="p">;</span>
<span class="nx">opts</span><span class="p">.</span><span class="nx">chainId</span> <span class="o">=</span>
    <span class="s1">'79276aea5d4877d9a25892eaa01b0adf019d3e5cb12a97478df3298ccdd01673'</span><span class="p">;</span>
<span class="c1">//connect to server which is connected to the network/testnet</span>
<span class="kr">const</span> <span class="nx">client</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">dsteem</span><span class="p">.</span><span class="nx">Client</span><span class="p">(</span><span class="s1">'https://testnet.steem.vc'</span><span class="p">,</span> <span class="nx">opts</span><span class="p">);</span>
</code></pre>
</div>

<p>Above, we have <code class="highlighter-rouge">dsteem</code> pointing to the test network with the proper chainId, addressPrefix, and endpoint.<br />
Because this tutorial modifies the blockchain, we will use a testnet and a predefined account to demonstrate comment publishing.</p>

<h4 id="2-choose-parent-post">2. Choose parent post<a name="choose-post"></a></h4>

<p>We need to choose a parent post and parse out the parent author and parent permlink.
Below is a url that uses an instance of condenser pointed at our testnet.</p>

<div class="highlighter-rouge"><pre class="highlight"><code>http://condenser.steem.vc/qbvxoy72qfc/@demo/dsf0yxlox2d
</code></pre>
</div>

<p>In this case. <code class="highlighter-rouge">dsf0yxlox2d</code> will be our parent permlink and <code class="highlighter-rouge">@demo</code> will be the the parent author.</p>

<h4 id="3-add-content">3. Add content<a name="add-content"></a></h4>

<p>We’ve added the parent post info and <code class="highlighter-rouge">Some amazing content</code> in our UI via the keyboard.
<img src="https://github.com/steemit/devportal-tutorials-js/blob/master/tutorials/11_submit_comment_reply/images/comment_reply_user_input.png?raw=true" alt="comment_reply_user_input.png" /></p>

<h4 id="4-get-comment-data">4. Get Comment Data<a name="get-comment"></a></h4>

<p>In the <code class="highlighter-rouge">submitComment</code> function, (runs when “Submit comment!” is clicked)
We gather information from the UI.</p>

<div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="c1">//get private key</span>
<span class="kr">const</span> <span class="nx">privateKey</span> <span class="o">=</span> <span class="nx">dsteem</span><span class="p">.</span><span class="nx">PrivateKey</span><span class="p">.</span><span class="nx">fromString</span><span class="p">(</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'postingKey'</span><span class="p">).</span><span class="nx">value</span>
<span class="p">);</span>
<span class="c1">//get account name</span>
<span class="kr">const</span> <span class="nx">account</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'username'</span><span class="p">).</span><span class="nx">value</span><span class="p">;</span>
<span class="c1">//get body</span>
<span class="kr">const</span> <span class="nx">body</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'body'</span><span class="p">).</span><span class="nx">value</span><span class="p">;</span>
<span class="c1">//get parent author permalink</span>
<span class="kr">const</span> <span class="nx">parent_author</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'parent_author'</span><span class="p">).</span><span class="nx">value</span><span class="p">;</span>
<span class="c1">//get parent author permalink</span>
<span class="kr">const</span> <span class="nx">parent_permlink</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'parent_permlink'</span><span class="p">).</span><span class="nx">value</span><span class="p">;</span>
</code></pre>
</div>

<h4 id="5-create-comment-permlink">5. Create comment permlink<a name="get-permlink"></a></h4>

<p>Every post needs a unique permalink.
Because comments don’t typically have a title, we recommend using a random number for ours.</p>

<p><em>Note: <strong>Take care of your users:</strong> Because permlinks are unique within an author’s scope, we recommend random numbers for comments; or at least making it a default in your settings.</em></p>

<div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="c1">//generate random permanent link for post</span>
<span class="kr">const</span> <span class="nx">permlink</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span>
    <span class="p">.</span><span class="nx">toString</span><span class="p">(</span><span class="mi">36</span><span class="p">)</span>
    <span class="p">.</span><span class="nx">substring</span><span class="p">(</span><span class="mi">2</span><span class="p">);</span>
</code></pre>
</div>

<h4 id="6-build-comment-object">6. Build comment object<a name="build-comment"></a></h4>

<p>We take the information we gathered from the UI and put it into a well structured comment object.</p>

<div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="kr">const</span> <span class="nx">comment</span> <span class="o">=</span> <span class="p">{</span>
    <span class="na">author</span><span class="p">:</span> <span class="nx">account</span><span class="p">,</span>
    <span class="na">title</span><span class="p">:</span> <span class="s1">''</span><span class="p">,</span>
    <span class="na">body</span><span class="p">:</span> <span class="nx">body</span><span class="p">,</span>
    <span class="na">parent_author</span><span class="p">:</span> <span class="nx">parent_author</span><span class="p">,</span>
    <span class="na">parent_permlink</span><span class="p">:</span> <span class="nx">parent_permlink</span><span class="p">,</span>
    <span class="na">permlink</span><span class="p">:</span> <span class="nx">permlink</span><span class="p">,</span>
    <span class="na">json_metadata</span><span class="p">:</span> <span class="s1">''</span><span class="p">,</span>
<span class="p">};</span>
</code></pre>
</div>

<h4 id="7-post-comment">7. Post comment<a name="post-comment"></a></h4>

<p>We post the comment to the blockchain and render the resulting block number if successful,
or output an error to the console if there’s a failure.</p>

<div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'comment broadcast object'</span><span class="p">,</span> <span class="nx">comment</span><span class="p">);</span>
<span class="nx">client</span><span class="p">.</span><span class="nx">broadcast</span><span class="p">.</span><span class="nx">comment</span><span class="p">(</span><span class="nx">comment</span><span class="p">,</span> <span class="nx">privateKey</span><span class="p">).</span><span class="nx">then</span><span class="p">(</span>
    <span class="kd">function</span><span class="p">(</span><span class="nx">result</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'comment broadcast result'</span><span class="p">,</span> <span class="nx">result</span><span class="p">);</span>
        <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span>
            <span class="s1">'postLink'</span>
        <span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="err">`</span><span class="o">&lt;</span><span class="nx">br</span><span class="o">/&gt;&lt;</span><span class="nx">p</span><span class="o">&gt;</span><span class="nx">Included</span> <span class="k">in</span> <span class="nx">block</span><span class="err">:</span> <span class="nx">$</span><span class="p">{</span>
            <span class="nx">result</span><span class="p">.</span><span class="nx">block_num</span>
        <span class="p">}</span><span class="o">&lt;</span><span class="sr">/p&gt;&lt;br/</span><span class="o">&gt;&lt;</span><span class="nx">br</span><span class="o">/&gt;&lt;</span><span class="nx">a</span> <span class="nx">href</span><span class="o">=</span><span class="s2">"http://condenser.steem.vc/@${parent_author}/${parent_permlink}"</span><span class="o">&gt;</span><span class="nx">Check</span> <span class="nx">post</span> <span class="nx">here</span><span class="o">&lt;</span><span class="sr">/a&gt;`</span><span class="err">;
</span>    <span class="p">},</span>
    <span class="kd">function</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="nx">error</span><span class="p">);</span>
    <span class="p">}</span>
<span class="p">);</span>
</code></pre>
</div>

<p>A successful comment will output something like the following to the console:
<img src="https://github.com/steemit/devportal-tutorials-js/blob/master/tutorials/11_submit_comment_reply/images/comment_reply_successful_console_output.png?raw=true" alt="successful console output" /></p>

<p>That’s all there is to it.</p>

<p>The <code class="highlighter-rouge">broadcast</code> operation has more to offer than just committing a post/comment to the blockchain. It provides a mulititude of options that can accompany this commit. The max payout and percent of steem dollars can be set. When authors don’t want all of the benifits from a post, they can set the payout factors to zero or beneficiaries can be set to receive part of the rewards. You can also set whether votes are allowed or not. The broadcast to the blockchain can be modified to meet the exact requirements of the author. More information on how to use the <code class="highlighter-rouge">broadcast</code> operation can be found on the Steem <a href="https://developers.steem.io/apidefinitions/#apidefinitions-broadcast-ops-comment">Devportal</a> with a list of the available broadcast options under the specific <a href="https://developers.steem.io/apidefinitions/#broadcast_ops_comment_options">Appbase API</a></p>

<h3 id="to-run-the-tutorial">To Run the tutorial</h3>

<ol>
  <li>clone this repo</li>
  <li><code class="highlighter-rouge">cd tutorials/11_submit_comment_reply</code></li>
  <li><code class="highlighter-rouge">npm i</code></li>
  <li><code class="highlighter-rouge">npm run dev-server</code> or <code class="highlighter-rouge">npm run start</code></li>
  <li>After a few moments, the server should be running at http://localhost:3000/</li>
</ol>

<hr />

</section>

</div>
<div class="footer">
	<a href="#">Back to top</a>
</div>
<script>
    document.getElementById("open-nav").addEventListener("click", function () {
        document.body.classList.toggle("nav-open");
    });
</script>
</body>
</html>


<script src="/js/adjust.js"></script>

